<template>
	<div>
		<el-table :data="tableData" style="width: 100%">
			<el-table-column prop="no" current-row-key='no' label='订单编号' width="180">
			</el-table-column>
			<el-table-column prop="price" label="价格" width="180">
			</el-table-column>
			<el-table-column prop="address" label="地址">
			</el-table-column>
			<el-table-column prop="createdAt" label="创建时间">
			</el-table-column>
			<el-table-column prop="isPayed" label="支付状态">
				<template scope="scope">
					<el-tag type="info" class='isPayed'>{{ scope.row.isPayed | toAdmin }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" round @click="dialog(scope.$index)">修改</el-button>
					<el-button type="danger" round @click="delOrder(scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog title="订单状态" :visible.sync="dialogFormVisible">
			<el-form :model="form">
				<el-form-item label="更改状态" :label-width="formLabelWidth">
					<el-select v-model="form.region" placeholder="请选择更改的状态">
						<el-option label="未支付" value="false"></el-option>
						<el-option label="已完成" value="true"></el-option>
					</el-select>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="nodialog1">取 消</el-button>
				<el-button type="primary" @click="nodialog">确 定</el-button>
			</div>
		</el-dialog>
		<el-pagination background layout="prev, pager, next" :total="totalCount"
		@current-change="handleCurrentChange"
		 :current-page="currentPage"
		 class="fen"
		 >
		</el-pagination>
	</div>
</template>

<script>
	import * as api from '../api/Order'
	import axios from 'axios'
	export default {
		name: 'orderOPeration',
		data() {
			return {
				tableData: [],
				dialogFormVisible: false,
				form: {
					region: '',
				},
				formLabelWidth: '120px',
				no:'',
				scope:'',
				currentPage:1,
				region:'',
				totalCount:50
			}
		},
		filters: {
			toAdmin: function(val, row) {
				if (val) {
					return '已完成'
				} else {
					return '未支付'
				}
			}
		},
		methods: {
			// 点击修改弹框数据
			dialog(scope) {
				this.scope = scope;
				this.no = this.tableData[scope]._id;
				this.dialogFormVisible = true
				this.region = this.tableData[scope].isPayed
				if(this.tableData[scope].isPayed){
					this.form.region = '已完成'
				}else{
					this.form.region = '未支付'
				}
			},
			// 删除订单
			delOrder(scope){
				this.no = this.tableData[scope]._id;
				api.delOrder(this.no,{}).then(res=>{
					this.$router.go(0)
				})
			},
			// 修改订单状态
			nodialog(){
				api.updateOrder(this.no,{
					isPayed:!this.region
				}).then(res=>{
					this.dialogFormVisible = false
					this.tableData[this.scope].isPayed = !this.region
				})
			},
			nodialog1(){
				this.dialogFormVisible = false
			},
			handleCurrentChange(currentPage){
				this.currentPage = currentPage;
				api.orders({
					per:6,
					page: currentPage
				}).then(res => {
					this.tableData = res.data.orders
				})
			}
		},
		mounted() {
			api.orders({
				per:6,
				page: 1
			}).then(res => {
				this.totalCount = res.data.totalCount
				this.tableData = res.data.orders
			})
		},
		updated() {
			let isPayed = document.querySelectorAll('.isPayed')
			isPayed.forEach(function(v) {
				if (v.innerHTML == '已完成') {
					v.className = 'isPayed el-tag el-tag--success el-tag--light'
				}else{
					v.className = 'isPayed el-tag el-tag--info el-tag--light'
				}
			})
		}
	}
</script>

<style scoped="">
	.fen{
		position: absolute;
		left: 40%;
		bottom: 10px;
	}
</style>
